<template>
 <div class="banner">
  <img :src="banner" alt="">

  <h1>{{ $t('mining.title') }}</h1>
 </div>
</template>

<script>
export default {
 name: "Banner",
 data: () => ({
  banner: require('@/assets/product-banner.png')
 })
}
</script>

<style scoped lang="scss">
.banner {
 position: relative;
 width: 100%;

 h1 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 100%;
  text-align: center;
  font-size: 48px;
  font-weight: bold;
  color: #fff;
 }

 img {
  display: block;
  width: 100%;
 }
}
</style>
